<template>
  <button @click="flag = !flag">Toggle</button>

  <Transition>
    <h1 v-if="flag">Hello, 龙彬。</h1>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'

const flag = ref(false)
</script>

<style scoped>
/* 1. 定义关键帧动画 */
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

/* 2. 入场动画 */
.v-enter-active {
  animation: bounce-in 1s ease;
}

/* 3. 离场动画 */
.v-leave-active {
  animation: bounce-in 1s ease reverse;
}
</style>
